<style scoped>
.progress .used {
  font-size: 14px;
  margin-bottom: 8px;
}
.progress .used p {
  height: 22px;
  line-height: 22px;
}
.progress .used p span {
  width: 100%;
}
.progress .used .ti {
  display: inline-block;
  margin-right: 4px;
  text-align: right;
}
.progress .used .value {
  display: inline-block;
  text-align: left;
}
.progress .progress-num {
  font-size: 20px;
}
.progress .progress-num span {
  font-size: 14px;
}
.progress .progress-text {
  font-size: 13px;
  margin-top: 3px;
}
</style>
<!--  -->
<template>
  <div class="progress" v-loading="loading">
    <div class="used">
      <p class="dffr">
        <span class="ti orange">已用：</span>
        <span class="value">{{prog.useful}}</span>
      </p>
      <p class="dffr">
        <span
          :class="{'ti':true, 'green': parseInt(prog.remaining) > 0, 'red': parseInt(prog.remaining) <= 0}">剩余：</span>
        <span class="value">{{prog.remaining}}</span>
      </p>
    </div>
    <el-progress type="circle" :percentage="prog.percentage" :color="prog.color"></el-progress>
    <div class="progress-text">
      {{prog.text}}：{{prog.total}}<span>{{prog.unit}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: true,
      prog: {}
    }
  },
  methods: {
    show (prog) {
      this.loading = false
      this.prog = prog
    }
  }
}

</script>
